<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、html和Js线程互斥
         2、html是双线程，JS是单线程
         3、俩个不能同时加载运行
         4、script最好放在结构下面，主要先让结构和资源加载好了之后，JS再获取DOM再执行
         5、script放上面要加onload，Html线程运行好了再运行JS线程
         6、如果script代码很多要改成JS文件，最好也要加onload页面加载 -->
    <script>
        // 页面加载事件
        window.onload=function(){
            console.log('页面结构和资源已经加载好了，快打开看看吧!!!')
            let boxEle = document.getElementById('box');
        }
    </script>
</head>

<body>
    <h1 id="box"></h1>

</body>

</html>